<template>
  <view style="position: relative" :style="{ height: screenHeight + 'px' }">
    <video
      :id="'myVideo' + video.docid"
      class="video"
      @pause="pauseVideo()"
      @play="playVideo"
      @click="click"
      :enable-play-gesture="true"
      :loop="false"
      :autoplay="true"
      :show-fullscreen-btn="false"
      :src="video.Address"
      :poster="video.Image"
      @loadedmetadata="loadedmetadata"
      :style="{ height: screenHeight + 'px' }"
    ></video>
    <Likes :item="video"></Likes>
  </view>
</template>

<script>
import Likes from "./tool.vue";
export default {
  props: ["video"],
  name: "videoPlayer",
  components: {
    Likes,
  },
  data() {
    return {
      play: false,
      screenHeight: uni.getSystemInfoSync().windowHeight,
    };
  },
  mounted() {
    this.videoContext = uni.createVideoContext(
      "myVideo" + this.video.docid,
      this
    );
  },
  methods: {
    goDetail(id) {
      uni.navigateTo({
        url: "/pages/video/videoDetail?id=" + id,
        animationDuration: 300,
        animationType: "zoom-fade-out",
      });
    },
    click() {
      if (!this.play) {
        this.videoContext.play();
      } else {
        this.videoContext.pause();
      }
    },
    playVideo() {
      this.play = true;
    },
    pauseVideo() {
      this.play = false;
    },
    loadedmetadata() {
      console.log(9999);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-video-bottom {
  position: absolute;
  bottom: 45px;
  width: 750rpx;
  z-index: 88;
  padding: 0 30rpx;
}

.home-video-num {
  padding: 20rpx 0;
  /* height: 70rpx; */
  /* line-height: 70rpx; */
  flex-direction: row;
  /* background-color: #fff; */
}

.video {
  position: relative;
  height: 100%;
  width: 750upx;
  z-index: 8;
}
</style>
